<template>
    <div class="list_page_tree">
        <el-input v-model="filterText" placeholder="输入企业名称查询"></el-input>
        <div :style="{'height': height}" class="page_tree">
            <el-tree ref="tree"
                     v-loading="loading"
                     :check-on-click-node="true"
                     :data="dataList"
                     :default-checked-keys="defaultKeys"
                     :default-expanded-keys="defaultKeys"
                     :expand-on-click-node="false"
                     :filter-node-method="filterNode"
                     :props="defaultProps"
                     node-key="value"
                     @node-click="nodeClick"
            >
                <div slot-scope="{ node, data }" :class="(data.value===selected.value)?'is-selected-tree':''"
                     class="page_el_tree_div_node">
                    <i v-if="data.content.organType==1" class="el-icon-s-home"/>
                    <i v-if="data.content.organType==2" class="el-icon-s-shop"/>
                    <div>
                        {{ data.label }}
                    </div>
                </div>
            </el-tree>
        </div>
    </div>
</template>

<script>
export default {
    name: "organizationTree",
    props: {
        id: String,
        selectLevel: Number,
        treeHeight: String,
    },
    data() {
        return {
            height: "500px",
            loading: false,

            dataList: [],
            defaultProps: {
                children: 'childNode',
                label: 'label',
            },
            filterText: '',
            defaultKeys: [],

            selected: {},
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        },
    },
    mounted() {
        this.$nextTick(() => {
            if (this.treeHeight) {
                this.height = this.treeHeight;
            } else {
                this.height = (document.body.offsetHeight - 144) + "px";
            }
        })
        this.getTreeList();
    },
    methods: {
        getTreeList() {
            this.loading = true;
            let param = {
                selectLevel: this.selectLevel,
            }
            if (this.id) {
                param.idPath = "|" + this.id + "|";
            }
            this.$axios.post("/CHILD_ORGANIZE/orgInstitution/getTreeList", param).then(res => {
                this.dataList = res.data;
                this.$nextTick(() => {
                    if (this.selected.value) {
                        this.$refs.tree.setCurrentKey(this.selected.value);
                        let defaultKeys = [];
                        defaultKeys.push(this.selected.value);
                        this.defaultKeys = defaultKeys;
                        this.nodeClick(this.$refs.tree.getCurrentNode());
                    } else {
                        if (this.id) {
                            this.$refs.tree.setCurrentKey(this.id);
                            let defaultKeys = [];
                            defaultKeys.push(this.id);
                            this.defaultKeys = defaultKeys;
                            this.nodeClick(this.$refs.tree.getCurrentNode());
                        } else {
                            if (this.dataList.length > 0) {
                                this.$refs.tree.setCurrentKey(res.data[0].value);
                                let defaultKeys = [];
                                defaultKeys.push(res.data[0].value);
                                this.defaultKeys = defaultKeys;
                                this.nodeClick(this.$refs.tree.getCurrentNode());
                            }
                        }
                    }
                });
                this.loading = false;
            }).catch(() => {
                this.$message.error(err.message)
                this.loading = false;
            })
        },
        nodeClick(data) {
            this.selected = data;
            this.$emit('change', data);
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
    }
}
</script>

<style lang="scss">
.page_el_tree_div_node {
    i {
        display: inline;
        font-size: 20px;
    }

    div {
        display: inline;
        font-size: 14px;
    }
}

.is-selected-tree {
    div {
        color: #1e1e1f;
        font-weight: bolder;
    }
}
</style>